import React from 'react'
import Tips from '../tips'
import { Form, Button, Upload } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import styles from './index.less'

export default () => {
    const dataList: any[] = [
        "可以上传三张图片，建议使用1920px*615px",
        "可上传.jpg、.png的图片",
        `"置空"会删除图片，提交保存后生效`
    ];

    const handleUploadChange = (info: any): any => {
        let fileList = info.fileList;
        fileList = fileList.slice(-1);
        if (info.file.status === 'done') {
            message.success(`${info.file.name}文件上传成功`);
            fileList[0].url = fileList[0]['response']['data']['filePath'];
        }
        return fileList
    };

    return (
        <div>
            <Tips dataList={dataList} isShow={true} />
            <div style={{ backgroundColor: "white", padding: "8px 10px" }}>
                <nav className={styles.navTitle}>图片上传 </nav>

                <Form
                    labelCol={{ span: 3 }}
                    wrapperCol={{ span: 15 }}
                >
                    <Form.Item label="首页横幅一" valuePropName="fileList" getValueFromEvent={handleUploadChange}>
                        <Upload
                            action='http://127.0.0.1:8888/admin/tool/upload'
                            listType='picture'
                        >
                            <Button><UploadOutlined /> Upload</Button>
                        </Upload>
                    </Form.Item>
                    <Form.Item label="首页横幅二" valuePropName="fileList" getValueFromEvent={handleUploadChange}>
                        <Upload
                            action='http://127.0.0.1:8888/admin/tool/upload'
                            listType='picture'
                        >
                            <Button><UploadOutlined /> Upload</Button>
                        </Upload>
                    </Form.Item>
                    <Form.Item label="首页横幅三" valuePropName="fileList" getValueFromEvent={handleUploadChange}>
                        <Upload
                            action='http://127.0.0.1:8888/admin/tool/upload'
                            listType='picture'
                        >
                            <Button><UploadOutlined /> Upload</Button>
                        </Upload>
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 3 }}>
                        <Button type="primary">保存</Button>
                    </Form.Item>
                </Form>
            </div>
        </div >
    )
}